import { LeftOutlined } from '@ant-design/icons'
import back from '../img/login/fanhui1.png'
import './register.css'
import loginIcon from '../img/login/73329722893421062.png'
import { Input, Space, Button, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { getUserDjm, addUser, getUser2Djm } from '../api/api'
function Register() {
  const navigate = useNavigate()
  const [changeFont, setChangeFont] = useState('获取验证码')
  const [name, setName] = useState('')
  const [phone, setPhone] = useState(null)
  const [code, setCode] = useState('')
  const [password, setPassword] = useState('')
  const [messageApi, contextHolder] = message.useMessage();
  const [m, setM] = useState(null)
  let [data, setData] = useState([])
  useEffect(() => {

    getUserDjm().then(res => {
      setData(res.data)
    })
  }, [])
  const register = () => {
    let data = {
      userName: name,
      phone: Number(phone),
      password: password
    }
    let p = /^[\d]{11}$/;
    if (!p.test(phone)) {
      messageApi.open({
        type: 'error',
        content: '手机号长度必须为11位',
      });
    } else if (code != m) {
      messageApi.open({
        type: 'error',
        content: '验证码错误',
      });
    } else if (name == '') {
      messageApi.open({
        type: 'error',
        content: '昵称不能为空',
      });
    } else if (password == '') {
      messageApi.open({
        type: 'error',
        content: '密码不能为空',
      });
    }
    else {
      getUser2Djm(phone).then(res => {
        if (res.msg != "查找成功") {
          addUser(data).then(res => {
            messageApi.open({
              type: 'success',
              content: '注册成功',
            });
            navigate('/login')
          })
        } else {
          messageApi.open({
            type: 'error',
            content: '该手机号已注册',
          });
        }
      })
    }
  }
  return (
    <div className="register">
      {contextHolder}
      <div className="register-mar">
        <div className="register-header">
          <div className="reg-back">
            <LeftOutlined onClick={() => {
              navigate(-1)
            }} />
          </div>
          <div className='reg-title'>
            WELCOME
          </div>
          <div className='reg-right'>

          </div>
        </div>
        <div className="reg-icon">
          <img src={loginIcon} alt="" />
        </div>
        <div className='reg-ipt'>
          <Input value={name} onChange={(e) => { setName(e.target.value) }} className='reg-ipt-item' placeholder='请输入昵称'></Input>
          <Space.Compact style={{ width: '100%' }}>
            <Input type="number" onChange={(e) => { setPhone(e.target.value) }} value={phone} className='reg-ipt-item' placeholder='请输入手机号'></Input>
            <Button onClick={() => {
              let p = /^[\d]{11}$/;
              if(p.test(phone)){
                let code = Math.floor(Math.random() * 4000 + 1000)
                console.log(code);
                setM(code)
                let num = 60
                let Time = setInterval(() => {
                  if (num != 0) {
                    num--
                    setChangeFont(num)
                  } else {
                    clearInterval(Time)
                    setChangeFont('获取验证码')
                  }
                }, 1000)
              }else{
                messageApi.open({
                  type: 'error',
                  content: '手机号长度必须为11位',
                });
              }
            }} type="primary">{changeFont}</Button>
          </Space.Compact>
          <Input onChange={(e) => { setCode(e.target.value) }} value={code} className='reg-ipt-item' placeholder='请输入验证码'></Input>
          <Input.Password onChange={(e) => { setPassword(e.target.value) }} value={password} className='reg-ipt-item' placeholder='请设置密码'></Input.Password>
          <Button onClick={() => register()} block style={{ background: '#e98f36', color: '#fff', marginTop: '10px' }}>注册</Button>
        </div>
        <div className='reg-text'>
          <span style={{ color: 'rgb(48, 48, 48)' }}>同意</span>
          <span style={{ color: '#e98f36' }}>服务协议</span>
        </div>
      </div>
    </div>
  )
}
export default Register